/* 输入框组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 输入框变量 */
:root {
  --input-height-large: calc(56 * var(--unit));
  --input-height-medium: calc(48 * var(--unit));
  --input-height-small: calc(40 * var(--unit));
  --input-padding-x: calc(16 * var(--unit));
  --input-padding-y: calc(12 * var(--unit));
  --input-border-radius: calc(8 * var(--unit));
  --input-border-width: 1px;
  --input-font-size: var(--font-size-body-medium);
  --input-transition-duration: 0.3s;
  --input-icon-size: calc(20 * var(--unit));
  --input-icon-gap: calc(8 * var(--unit));
}

/* 基础输入框样式 */
.input,
textarea,
select {
  width: 100%;
  height: var(--input-height-medium);
  padding: 0 var(--input-padding-x);
  border: var(--input-border-width) solid var(--color-comp-divider);
  border-radius: var(--input-border-radius);
  background-color: var(--color-comp-background-primary);
  color: var(--color-font-primary);
  font-size: var(--input-font-size);
  font-family: inherit;
  line-height: 1.5;
  transition: all var(--input-transition-duration) ease;
  outline: none;
  box-sizing: border-box;

  /* 占位符样式 */
  &::placeholder {
    color: var(--color-font-tertiary);
  }

  /* 焦点状态 */
  &:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px var(--color-brand10);
  }

  /* 禁用状态 */
  &:disabled {
    background-color: var(--color-comp-background-tertiary);
    color: var(--color-font-fourth);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* 错误状态 */
  &.error,
  &.invalid {
    border-color: var(--color-waring);

    &:focus {
      border-color: var(--color-waring);
      box-shadow: 0 0 0 2px rgba(232, 64, 38, 0.1);
    }
  }

  /* 成功状态 */
  &.success,
  &.valid {
    border-color: var(--color-confirm);

    &:focus {
      border-color: var(--color-confirm);
      box-shadow: 0 0 0 2px rgba(100, 187, 92, 0.1);
    }
  }
}

/* 文本域 */
textarea {
  height: auto;
  min-height: calc(80 * var(--unit));
  padding: var(--input-padding-y) var(--input-padding-x);
  resize: vertical;
}

/* 输入框容器 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;

  .input,
  textarea,
  select {
    padding-right: calc(var(--input-padding-x) + var(--input-icon-size) + var(--input-icon-gap));
  }

  /* 前置图标 */
  .input-prefix {
    position: absolute;
    left: var(--input-padding-x);
    display: flex;
    align-items: center;
    color: var(--color-icon-secondary);
    pointer-events: none;

    .input-icon {
      width: var(--input-icon-size);
      height: var(--input-icon-size);
      fill: currentColor;
    }
  }

  &.has-prefix {
    .input,
    textarea,
    select {
      padding-left: calc(var(--input-padding-x) + var(--input-icon-size) + var(--input-icon-gap));
    }
  }

  /* 后置图标 */
  .input-suffix {
    position: absolute;
    right: var(--input-padding-x);
    display: flex;
    align-items: center;
    color: var(--color-icon-secondary);
    cursor: pointer;

    .input-icon {
      width: var(--input-icon-size);
      height: var(--input-icon-size);
      fill: currentColor;
    }

    &:hover {
      color: var(--color-icon-primary);
    }
  }
}

/* 输入框尺寸变体 */
.input-large,
.input-wrapper.large {
  .input,
  textarea,
  select {
    height: var(--input-height-large);
    padding: 0 calc(var(--input-padding-x) * 1.5);
    font-size: var(--font-size-body-large);
  }

  .input-prefix,
  .input-suffix {
    .input-icon {
      width: calc(24 * var(--unit));
      height: calc(24 * var(--unit));
    }
  }
}

.input-small,
.input-wrapper.small {
  .input,
  textarea,
  select {
    height: var(--input-height-small);
    padding: 0 calc(var(--input-padding-x) * 0.75);
    font-size: var(--font-size-body-small);
  }

  .input-prefix,
  .input-suffix {
    .input-icon {
      width: calc(16 * var(--unit));
      height: calc(16 * var(--unit));
    }
  }
}

/* 输入框标签 */
.input-label {
  display: block;
  font-size: var(--font-size-title-sub-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-font-primary);
  margin-bottom: calc(8 * var(--unit));
}

/* 输入框帮助文本 */
.input-help {
  display: block;
  font-size: var(--font-size-caption-medium);
  color: var(--color-font-secondary);
  margin-top: calc(4 * var(--unit));
}

/* 输入框错误文本 */
.input-error {
  display: block;
  font-size: var(--font-size-caption-medium);
  color: var(--color-waring);
  margin-top: calc(4 * var(--unit));
}

/* 输入框组 */
.input-group {
  display: flex;
  gap: calc(8 * var(--unit));

  .input,
  .input-wrapper {
    flex: 1;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .input,
  textarea,
  select {
    background-color: var(--color-background-secondary);
    border-color: var(--color-comp-divider);
    color: var(--color-font-primary);

    &:disabled {
      background-color: var(--color-comp-background-tertiary);
    }
  }
}

